<template>
	<view>
		<view style="margin: 20rpx;color: #ccc;">
			① 请确认银行卡号无出错<br />
			② 提现之后不可更改，不可回退<br />
			③ 请谨慎查看
		</view>
		<view style="background-color: white">
			<!-- 基础表单校验 -->
			<up-form :model="form" :rules="rules" label-width="90px" ref="formRef">
				<view class="form_part">
					<up-form-item label="提现至" prop="bankAccountShow" border-bottom @click="openSelect">
						<up-input disabled disabledColor="#fff" placeholder="请选择银行卡" border="none" v-model="form.bankAccountShow"/>
						<template v-slot:right>
							<up-icon name="arrow-right" />
						</template>
					</up-form-item>
					<up-form-item label="提现金额" prop="amount" border-bottom>
						<up-input placeholder="请输入要提现的金额" border="none" v-model="form.amount" />
						<template v-slot:right>
							<text>元</text>
						</template>
					</up-form-item>
					<up-form-item label="验证码" prop="code">
						<up-input border="none" v-model="form.code" placeholder="请输入验证码"></up-input>
						<template v-slot:right>
							<div style="width: 80px;">
								<up-code ref="uCode" @change="codeChange"></up-code>
								<up-button style="height: 35px;" type="primary" @tap="getCode"><span
										style="font-size: 10px;">{{ tips }}</span></up-button>
							</div>
						</template>
					</up-form-item>
				</view>
			</up-form>
		</view>
		<view class="TranOut">
			<view class="allSmall">可转出{{ money }}元</view>
			<view class="allLarge" @click="allConfirm">全部提现</view>
		</view>
		<view class="form_button">
			<up-button type="primary" @click="confirmWithdraw">确认提现</up-button>
		</view>
	</view>

	<up-picker :show="show" :columns="[bankCardList]" keyName="bank" title="请选择银行卡" @confirm="confirmSelect"
		@cancel="cancelSelect" />


	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import {
	accountNoPage,
	reflbankcard,
	withdrawSmsCode,
	getmoney
} from '@/api/driver.js'


/* 数据 */
const uToastRef = ref(null)
const formRef = ref(null)
const uCode = ref(null)
const show = ref(false)
// 可提现金额
const money = ref(0)
// 银行卡列表
const bankCardList = reactive([])
// 表单
const form = reactive({
	bankAccountShow: '',
	bankAccount: '',
	amount: '',
	code: ''
})
// 表单校验规则
const rules = reactive({
	bankAccountShow: {
		type: 'string',
		required: true,
		message: '请选择银行卡',
		trigger: ['blur', 'change']
	},
	code: {
		type: 'string',
		required: true,
		message: '请填写验证码',
		trigger: ['blur', 'change']
	},
	amount: [{
		type: 'number',
		required: true,
		message: '请填写要提现的金额',
		trigger: ['blur', 'change']
	},
	{
		pattern: /^(?!0+(\.0+)?$)\d+(\.\d+)?$/,
		message: '请输入大于0的数字',
		trigger: ['blur', 'change']
	}]
})
// 验证码提示
const tips = ref('')



/* 方法 */
// 确认提现
const confirmWithdraw = async () => {
	let valid = await formRef.value.validate()
	if (valid) {
		let amount = Number(form.amount)
		let moneys = Number(money.value)

		if (amount > moneys) {
			uToastRef.value.show({
				position: "top",
				type: 'warning',
				message: "提现金额不能大于可提现金额"
			})
			return
		}

		// 弹出确认对话框
		let resModal = await uni.showModal({
			title: '提示',
			content: `请确认提现银行卡信息是否正确：\n${form.bankAccount}`,
		})
		if (!resModal.confirm) return


		uToastRef.value.show({
			message: "正在提现",
			type: 'loading',
			duration: -1
		})
		let res = await reflbankcard(form)
		uToastRef.value.hide()
		if (res.success) {
			uToastRef.value.show({
				position: "top",
				type: 'success',
				message: "提现成功"
			})
		}
	}
}
// 全部提现
const allConfirm = () => {
	form.amount = money.value
}
const codeChange = (text) => {
	tips.value = text
}
// 获取验证码
const getCode = async () => {
	if (!form.bankAccount) {
		uToastRef.value.show({
			position: "top",
			type: 'error',
			message: "请选择银行卡"
		})
		return
	}
	if (!form.amount || isNaN(form.amount) || Number(form.amount) <= 0) {
		uToastRef.value.show({
			position: "top",
			type: 'error',
			message: "请输入有效的金额(必须大于0)"
		})
		return
	}
	if (uCode.value.canGetCode) {
		uToastRef.value.show({
			type: 'loading',
			message: "正在获取验证码",
			duration: -1
		})
		let codeRes = await withdrawSmsCode(form)
		uToastRef.value.hide()
		if (codeRes.success) {
			uToastRef.value.show({
				position: "top",
				type: 'success',
				message: "验证码已发送"
			})
			// 通知验证码组件内部开始倒计时
			uCode.value.start()
		}
	} else {
		uToastRef.value.show({
			position: "top",
			type: 'warning',
			message: "倒计时结束后再发送"
		})
	}
}
// 确认选择银行
const confirmSelect = (e) => {
	form.bankAccountShow = `${e.value[0].bank}(${e.value[0].bankAccount})`
	form.bankAccount = e.value[0].bankAccount
	cancelSelect()
}
// 开启银行选择
const openSelect = () => {
	show.value = true
}
// 关闭银行选择
const cancelSelect = () => {
	show.value = false
}
// 获取可提现金额
const getMoneys = async () => {
	uToastRef.value.show({
		message: "加载中",
		type: 'loading',
		duration: -1
	})
	let res = await getmoney()
	uToastRef.value.hide()
	if (res.success) {
		money.value = res.data
	}
}
// 获取银行卡列表
const getBankCardList = async () => {
	uToastRef.value.show({
		message: "加载中",
		type: 'loading',
		duration: -1
	})
	let res = await accountNoPage()
	uToastRef.value.hide()
	if (res.success) {
		bankCardList.push(...res.data.list)
	}
}
// 初始化封装
const init = async () => {
	await getMoneys()
	await getBankCardList()
}



/* 钩子 */
onMounted(async () => {
	await init()
})

</script>

<style scoped>
.form_part {
	background-color: #fff;
	padding: 10px;
	box-sizing: border-box;
	margin-bottom: 10px;
}

.form_button {
	margin-left: 5%;
	width: 90%;
}

.TranOut {
	display: flex;
	justify-content: space-between;
	padding: 0 10px 45px 10px;
	color: royalblue;
	letter-spacing: 1px;
}

.allSmall {
	font-size: 12px;
}

.allLarge {
	font-size: 15px;
}
</style>
